<template>
  <div>
    <bread :second="'订单管理'" :third="'订单列表'"></bread>
    <!-- 表单 -->
    <el-card class="box-card">
      <el-row :gutter="20">
        <el-col :span="8">
          <div style="margin-top: 15px;">
            <el-input
              placeholder="请输入内容"
              v-model="ordersParams.query"
              clearable
              class="input-with-select"
            >
              <el-button slot="append" @click="GetOrdersList" icon="el-icon-search"></el-button>
            </el-input>
          </div>
        </el-col>
      </el-row>
      <!-- 表格 -->
      <el-table :data="tableData" border style="width: 100%;margin:20px 0;">
        <el-table-column type="index" label="序号" width="50"></el-table-column>
        <el-table-column prop="order_number" label="订单编号" width="250"></el-table-column>
        <el-table-column prop="order_price" label="订单价格(元)" width="50"></el-table-column>
        <el-table-column prop="order_pay" label="是否付款" width="100">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.order_pay==0" type="danger">未付款</el-tag>
            <el-tag v-else type="success">已付款</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="is_send" width="50" label="是否发货"></el-table-column>

        <el-table-column label="下单时间">
          <template slot-scope="scope">{{scope.row.create_time|format}}</template>
        </el-table-column>

        <el-table-column label="操作">
          <!-- 插槽 -->
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="editCommodity(scope.row)">
              <i class="el-icon-edit"></i>
            </el-button>
            <el-button size="mini" @click="MapGoodsBtn(scope.row)" type="success">
              <i class="el-icon-map-location"></i>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="ordersParams.pagenum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="ordersParams.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>

    <!-- 编辑订单弹出层 -->
    <el-dialog title="修改订单信息" :visible.sync="dialogFormVisible">
      <el-form :model="formorders" ref="formorders" :rules="addRules">
        <el-form-item label="修改地址" :label-width="formLabelWidth" prop="order_number">
          <!-- 级联选择器 -->
              <el-cascader
                v-model="value"
                :options="catelist"
                clearable 
                :props="options"
                expandTrigger= 'hover'
                @change="handleChange"
                style="width:100%;">
              </el-cascader>
        </el-form-item>
        <el-form-item label="详细地址" :label-width="formLabelWidth" prop="order_price">
          <el-input  autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addBtnCommodity">确 定</el-button>
      </div>
    </el-dialog>
      <!-- 查看物流信息、 -->
     <el-dialog title="查看物流信息" :visible.sync="dialogFormVisibleMap">
       <div>
          <el-steps direction="vertical" :active="1">
            <el-step v-for="(item,index) in wuliuData" :key="index" :title="item.time" :description="item.context"></el-step>
          </el-steps>
        </div>
     </el-dialog>
  </div>
</template>

<script>
// 导入省级联动文件
import citydata from './citydata.js'
import { ordersList_api, kuaidiAdd_api, reportsAdd_api } from '@/api/index.js'
export default {
  data() {
    return {
            // 下拉列表
      value:'',
      catelist:citydata,
      options:{
        value: 'value',
        label: 'label',
        children: 'children',
        

      },
      wuliuData:{},
      // 弹出层
      dialogFormVisible: false,
      dialogFormVisibleMap:false,
      formorders: {
        order_number: '',
        order_pay: '',
        order_price: '',
        is_send: '',
        id: '',
      },
      // 编辑商品表单验证
      addRules: {
        //用户名表单验证
        order_number: [{ required: true, message: '请输入订单编号', trigger: 'blur' }],
        order_pay: [{ required: true, message: '请输入付款状态', trigger: 'blur' }],
        order_price: [{ required: true, message: '请输入商品价格', trigger: 'blur' }],
        // 密码表单验证
        is_send: [{ required: true, message: '请输入发货状态', trigger: 'blur' }],
      },
      formLabelWidth: '120px',
      tableData: [],
      total: 1,
      ordersParams: {
        query: '',
        pagesize: 10,
        pagenum: 1,
      },
    }
  },
  created() {
    // 调用获取商品列表的方法
    this.GetOrdersList()
  },
  methods: {
    // 级联选择器
    handleChange(){},
    // 分页
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.ordersParams.pagesize = val
      // 调用获取商品列表的方法
      this.GetOrdersList()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.ordersParams.pagenum = val
      // 调用获取商品列表的方法
      this.GetOrdersList()
    },
    //定义一个 获取商品列表的方法
    async GetOrdersList() {
      const { data: res } = await ordersList_api(this.ordersParams)
      this.tableData = res.data.goods
      this.total = res.data.total
    },

    // 编辑商品
    editCommodity(row) {
      // console.log(row,1212);
      this.formorders = row
      this.formorders.id = row.order_id
      this.dialogFormVisible = true
    },
    // 编辑商品弹出层确定按钮
    addBtnCommodity() {
      // 二次验证
      this.$refs.formorders.validate(async (valid) => {
        if (!valid) return
        this.dialogFormVisible = false
        // const { data: res } = await reportsAdd_api(this.formorders)
        // //  console.log(this.formorders,87);
        // console.log(res, 1010)
        // this.$message({
        //   type: 'success',
        //   message: res.meta.msg,
        // })
        // // 刷新列表
        // this.GetOrdersList()
      })
    },
    //  物流详细信息
    async MapGoodsBtn(row) {
      // console.log(row,1212);
        this.dialogFormVisibleMap=true
        var id = 1106975712662
    const {data:res} = await kuaidiAdd_api(id)
        // console.log(res,123);
        this.wuliuData = res.data
      
    
    },
  },
}
</script>
<style lang="less">
</style>